<template>
  <div id="Home">
    <v-header :viewShow='true'></v-header>
    <div class="Home-block">
      <!-- < 导航> -->
      <div class="Home-nav">
        <ul>
          <template v-for="(item, index) in data">
            <li :key='index'
                :class="index == activeId? 'active': ''"
                @click="active_click(index)">
              <img :src="item.imgSrc"
                   alt="">
              <span>{{item.text}}</span>
            </li>
          </template>
        </ul>
      </div>
      <!-- 内容 -->
      <div v-if="myBank"
           class="Home-content">
        <v-active></v-active>
      </div>
      <div v-else
           class="Home-content">
        <!-- 通知 -->
        <div class="Home-content-notice">
          <img src="../assets/img/notice.png"
               alt="">
          <div id="marquee_box" ref="marquee_box">
            <ul id="marquee_box_ul" ref='marquee_box_ul'>
              <template v-for="(item, index) of tipsText">
                <p :key="index">{{item.tips}}</p>
              </template>
            </ul>
            <ul id="marquee_box_ul2" ref='marquee_box_ul2'>
              <template v-for="(item, index) of tipsText">
                <p :key="index">{{item.tips}}</p>
              </template>
            </ul>
          </div>
        </div>
        <!-- nav -->
        <div class="Home-content-nav">
          <ul>
            <template v-for="(item, index) in smallData">
              <li :class="index == smallActive?'active': ''"
                  :key="index"
                  @click="small_active_click(index)">{{item.goods_name}}</li>
            </template>
          </ul>
        </div>
        <!-- 卡片数据 -->
        <div class="Home-content-cards">
          <template v-for="(item, index) in cardData">
            <div class="card"
                 :key="index">
              <div class="card-class">
                <p>{{item.sub_name}}</p>
              </div>
              <div class="card-font">
                <p class="card-font-title">{{item.goods_name}}</p>
                <div v-if="item.is_sale === 1"
                     class="card-font-span">
                  <span>原价：￥{{item.price}}</span>
                  <span>优惠价：￥{{item.sale}}</span>
                </div>
                <div v-else
                     class="card-font-span">
                  <span>价格：￥{{item.price}}</span>
                </div>
                <div class="card-font-btn"
                     v-if="item.is_act === 0">
                  <button @click="active_goods(item.gid, item.goods_name)">激活</button>
                  <button @click="jump_personalCenter(item.gid, item.goods_name)">试用</button>
                </div>
                <div class="card-font-btn"
                     v-else>
                  <button @click="jump_personalCenter(item.gid, item.goods_name)">进入题库</button>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>

    <!-- 页尾 -->
    <v-footer></v-footer>
    <!-- 支付的弹窗 -->
    <el-dialog title="付费激活"
               :visible.sync="dialogFormVisible">
      <div class="box">
        <p>
          <span>温馨提示：</span>
          感谢您使用题库专家考试辅导软件！你可以通过下方渠道购买题库专家考试软件，如有疑问请联系我们。
          <span>软件激活后无使用期限 无数量限制 终生免费升级</span>
        </p>
        <p>用手机扫描下方二维码进行支付</p>
        <p>支付后联系微信或者QQ：{{qq}}领取激活码</p>
        <div>
          <img :src="wechat"
               alt="">
          <img :src="alipay"
               alt="">
        </div>
        <p><span>当前课程：{{goodName}}</span></p>
      </div>
      <div slot="footer"
           class="dialog-footer">
        <p>请输入激活码:</p>
        <input type="text"
               v-model="formCode"
               placeholder="购买题库后将激活码填入文本框中">
        <el-button type="primary"
                   @click="click_activation">激活</el-button>
        <!-- <el-button type="primary"
                   @click="dialogFormVisible = false">确 定</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import Active from '../views/PersonalCenter/components/Active'

export default {
  inject: ['reload'],
  name: 'Home',
  components: {
    'v-header': Header,
    'v-footer': Footer,
    'v-active': Active
  },
  data () {
    return {
      // 总数据
      allData: '',
      // 大分类数据
      data: [
        {
          id: '',
          imgSrc: require('../assets/img/tiku.png'),
          text: '我的题库'
        },
        {
          id: '',
          imgSrc: require('../assets/img/project.png'),
          text: '工程类考试'
        },
        {
          id: '',
          imgSrc: require('../assets/img/finance.png'),
          text: '财务会计'
        },
        {
          id: '',
          imgSrc: require('../assets/img/medicine.png'),
          text: '医药卫生'
        },
        {
          id: '',
          imgSrc: require('../assets/img/job.png'),
          text: '从业资格'
        },
        {
          id: '',
          imgSrc: require('../assets/img/civ.png'),
          text: '公务员'
        },
        {
          id: '',
          imgSrc: require('../assets/img/education.png'),
          text: '学历类'
        },
        {
          id: '',
          imgSrc: require('../assets/img/other.png'),
          text: '其他考试'
        }
      ],
      // 选中的大分类
      activeId: null,
      // 小分类数据
      smallData: '',
      smallActive: null,
      // 卡片数据
      cardData: '',
      // 支付的弹窗
      dialogFormVisible: false,
      // 激活码
      formCode: '',
      // 点击激活的题库
      activeC: '',
      // 通知
      tipsText: '',
      // 微信与阿里的支付码
      wechat: '',
      alipay: '',
      // 题目名称
      goodName: '',
      // QQ客服
      qq: '',
      // 我的题库
      myBank: false
    }
  },
  mounted () {
    // 文字滚动
    this.roll(100)
    // 给大分类赋值
    if (this.$store.state.homeActiveId) {
      this.activeId = this.$store.state.homeActiveId
    } else {
      this.activeId = 1
    }
    // 给小分类赋值
    // console.log(this.$store.state.homeSmallActive)
    if (this.$store.state.homeSmallActive) {
      this.smallActive = this.$store.state.homeSmallActive
      console.log('216', this.smallActive)
    } else {
      this.smallActive = 0
    }
    if (this.activeId === 0) {
      this.myBank = true
    }
    this.$http.custom({
      phone: localStorage.getItem('mobile')
    }).then((res) => {
      // console.log(res)
      // localStorage.setItem('customData', JSON.stringify(res.data.data))
      let customData = res.data.data
      this.wechat = customData.url + customData.wechat
      this.alipay = customData.url + customData.alipay
      this.qq = customData.pre
    }).catch((err) => {
      console.log(err)
    })

    // 获取分类列表
    this.$http.cate({
      phone: localStorage.getItem('mobile')
    }).then((res) => {
      // console.log('分类添加id', res)
      // 给分类添加id
      for (let item in res.data.data) {
        this.data[item].id = res.data.data[item].gid
      }
      // 总数据赋值
      this.allData = res.data.data
      if (this.activeId) {
        this.smallData = this.allData[this.activeId - 1].detail
        // console.log(this.smallData)
        if (this.smallActive) {
          this.cardData = this.smallData[this.smallActive].detail
          // console.log(this.smallActive)
          // console.log('this.cardData=', this.cardData)
        } else {
          this.cardData = this.smallData[0].detail
        }
      } else {
        this.smallData = this.allData[0].detail
        // console.log(this.smallData)
        this.cardData = this.smallData[0].detail
      }
      // console.log(this.allData)
    }).catch((err) => {
      console.log(err)
    })
    // 获取喇叭通知
    this.$http.tips({
    }).then((res) => {
      // console.log(res)
      this.tipsText = res.data.data
    }).catch((err) => {
      console.log(err)
    })
  },
  methods: {
    // 进入个人中心
    jump_personalCenter (gid, goodName) {
      this.$router.push({ path: '/personalCenter/lately' })
      this.$store.state.centerNavI = '/personalCenter/lately'
      // this.$store.state.navSel = 0
      this.$store.state.goodName = goodName
      localStorage.setItem('gid', gid)
      this.$http.select({
        phone: localStorage.getItem('mobile'),
        id: gid
      }).then((res) => {
        // console.log(res)
      }).catch((err) => {
        console.log(err)
      })
    },
    // 点击选中大分类
    active_click (i) {
      if (i === 0) {
        // alert('呼哈')
        this.myBank = true
        this.activeId = i
        this.$store.state.homeActiveId = i
        this.$store.state.homeSmallActive = 0
      } else {
        this.myBank = false
        this.activeId = i
        this.$store.state.homeActiveId = i
        this.$store.state.homeSmallActive = 0
        // 给小分类赋值
        this.smallData = this.allData[i - 1].detail
        // 刷新小数据分类索引的值
        this.smallActive = 0
        this.cardData = this.smallData[0].detail
      }
    },
    // 点击小分类
    small_active_click (i) {
      console.log(i)
      this.smallActive = i
      this.$store.state.homeSmallActive = i
      // 给卡片数据赋值
      this.cardData = this.smallData[i].detail
    },
    // 点击激活付款
    active_goods (id, goodName) {
      console.log(id, goodName)
      this.$http.select({
        phone: localStorage.getItem('mobile'),
        id: id
      }).then((res) => {
        console.log(res)
      }).catch((err) => {
        console.log(err)
      })
      this.dialogFormVisible = true
      this.goodName = goodName
      this.activeC = id
    },
    // 发送激活码激活
    click_activation () {
      this.$http.code({
        phone: localStorage.getItem('mobile'),
        id: this.activeC,
        code: this.formCode
      }).then((res) => {
        console.log(res)
        this.$message({
          message: '激活成功',
          type: 'success'
        })
        this.dialogFormVisible = false
        this.reload()
      }).catch((err) => {
        console.log(err)
      })
    },
    roll (t) {
      var ul1 = this.$refs.marquee_box_ul
      console.log(ul1)
      // var ul2 = document.getElementById('marquee_box_ul2')
      var box = this.$refs.marquee_box
      console.log(box)
      // ul2.innerHTML = ul1.innerHTML
      box.scrollTop = 0
      var timer = setInterval(function () {
        if (box.scrollTop >= ul1.scrollHeight) {
          box.scrollTop = 0
        } else {
          box.scrollTop++
        }
      }, t)
      box.onmouseover = function () {
        clearInterval(timer)
      }
      box.onmouseout = function () {
        timer = setInterval(function () {
          if (box.scrollTop >= ul1.scrollHeight) {
            box.scrollTop = 0
          } else {
            box.scrollTop++
          }
        }, t)
      }
    }

  }
}
</script>
<style  lang='less'>
#Home {
  // background: #f5f5f5;
  height: 100%;
  .Home-block {
    overflow: hidden;
    height: calc(100% - 108px);
    .Home-nav {
      width: 16%;
      float: left;
      height: 100%;
      ul {
        height: 100%;
        // height: calc(100% - 108px);
        li {
          // height: 90px;
          height: calc(100% / 8);
          line-height: 90px;
          padding: 0 40px;
          background: linear-gradient(
            0deg,
            rgba(229, 229, 229, 1) 0%,
            rgba(255, 255, 255, 1) 100%
          );
          img {
            width: 28px;
            height: 26px;
            vertical-align: middle;
            margin-right: 15px;
          }
        }
        .active {
          background: url("../assets/img/active.png") no-repeat;
          background-size: 100% 100%;
          color: white;
        }
      }
    }
    .Home-content {
      // width: calc(84%-30px);
      width: 82%;
      height: 100%;
      padding: 0 1%;
      float: left;
      .Home-content-notice {
        margin: 20px 0;
        text-align: left;
        display: flex;
        align-items: center;
        img {
          width: 16px;
          height: 12px;
          margin-right: 15px;
        }
        p {
          font-size: 14px;
          color: #ff3000;
          padding-bottom: 10px;
        }
        #marquee_box{
          height: 20px;
          overflow: hidden;
        }
      }
      .Home-content-nav {
        overflow: hidden;
        padding: 15px;
        background: linear-gradient(
          0deg,
          rgba(100, 181, 246, 0.2) 0%,
          rgba(255, 255, 255, 0.2) 100%
        );
        border: 1px solid #64b5f6;
        ul {
          font-size: 14px;
          color: #999999;
          li {
            padding: 0 15px;
            float: left;
            border-right: 1px solid #d9d9d9;
            cursor: pointer;
          }
          & > li:last-child {
            border: none;
          }
          .active {
            color: #64b5f6;
          }
        }
      }
      .Home-content-cards {
        padding: 20px;
        height: calc(100% - 148px);
        overflow: auto;
        .card {
          // display: inline-block;
          padding: 10px 45px 10px 5px;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 10px 25px 0px rgba(217, 217, 217, 0.35);
          border-radius: 10px;
          text-align: left;
          float: left;
          margin: 0 30px 30px 0;
          .card-class {
            background: url("../assets/img/round.png") no-repeat;
            background-size: 100% 100%;
            text-align: center;
            width: 84px;
            height: 84px;
            float: left;
            font-size: 14px;
            margin-right: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            p {
              width: 60px;
              height: auto;
              color: #ffffff;
            }
          }
          .card-font {
            float: left;
            .card-font-title {
              font-size: 14px;
              color: #243056;
              font-weight: bold;
              width: 200px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            .card-font-span {
              font-size: 12px;
              color: #ff0000;
              margin: 10px 0;
              & > span:first-child {
                color: #999999;
                margin-right: 10px;
              }
            }
            .card-font-btn {
              button {
                padding: 8px 20px;
                border: none;
              }
              & > button:last-child {
                background: url("../assets/img/trial.png") no-repeat;
                background-size: 100% 100%;
                color: #999999;
              }
              & > button:first-child {
                background: url("../assets/img/pay.png") no-repeat;
                background-size: 100% 100%;
                color: white;
                margin-right: 15px;
              }
            }
          }
        }
      }
    }
  }
  .el-dialog__wrapper {
    .el-dialog {
      width: 40%;
      text-align: left;
      .el-dialog__body {
        .box {
          p {
            font-size: 14px;
            margin: 10px 0;
            span {
              color: #ff0000;
            }
          }
          div {
            margin: 20px 0;
            text-align: center;
            overflow: hidden;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-around;
            img {
              width: 180px;
              height: auto;
              max-height: 180px;
              margin: 10px 0;
              float: left;
            }
            & > img:last-child {
              float: right;
            }
          }
        }
      }
      .el-dialog__footer {
        .dialog-footer {
          display: flex;
          justify-content: space-between;
          flex-flow: row wrap;
          align-items: center;
          input {
            width: 40%;
            height: 40px;
            border-radius: 10px;
            border: 1px solid #999;
            padding: 0 10px;
            margin: 10px 20px;
            // flex-shrink: 0;
          }
          p {
            width: 120px;
          }
        }
      }
    }
  }
}
</style>
